<template>
  <div class="bind-phone">
    <p class="title">手机绑定</p>
    <p class="tip">请绑定手机号，账号更安全</p>
    <div class="div-input">
      <img src="@/assets/bangdingshouji01.png" class="phone-img" alt="">
      <input type="number" placeholder="请输入手机号码">
    </div>
    <div class="div-input">
      <img src="@/assets/bangdingshouji02.png" class="code-img" alt="">
      <input type="number" placeholder="请输入验证码">
      <span>短信验证</span>
    </div>
    <span class="btn" @click="submit">提交</span>
    <span class="i-tip">手机号一经绑定无法更改</span>
    <alert-box :alert-message = "alert"  v-if="alert"></alert-box>
  </div>
</template>

<script>

import alertBox from '@/components/alertBox'
  export default {
    components: {
      alertBox
    },
    data () {
      return {
        alert: {},
      }
    },
    created () {
      this.alert = {
        tip: '恭喜您，绑定手机号成功',
        btn: '返回',
        path: {path: '/bindPhone'},
        is_show: false
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      submit () {
        this.alert.is_show = true
      }
    }
  }
</script>

<style lang="stylus" scoped>
.bind-phone
  height 100vh
  background-color #fff
  .title
    color #333
    font-size 2.6rem
    line-height 2.6rem
    height 2.6rem
    font-weight bold
    text-align center
    margin-top 3.2rem
  .tip
    color #999
    font-size 1.5rem
    line-height 1.6rem;
    height 1.6rem;
    margin-top 1.5rem
    text-align center
    padding-bottom 1rem
  .div-input
    width 82%
    margin-left 9%
    height 5rem
    line-height 5rem
    color #333
    font-size 1.5rem
    position relative
    border-radius 100px
    margin-top 2rem
    .phone-img
      width 1.4rem
      position absolute
      left 2rem
      top 1.5rem
      z-index 1
    .code-img
      position absolute
      width 1.4rem
      top 1.7rem
      z-index 1
      left 2rem
    input
      width 100%
      height 100%
      background-color #f5f5f5
      border-radius 100px
      position absolute
      padding-left 4.7rem
      box-sizing border-box
      left 0
      top 0
      font-size 1.5rem
      outline none
    span
      color #172F6D
      font-size 1.5rem
      line-height 2rem
      height 2rem
      position absolute
      width 9.4rem
      top 1.5rem
      right 0
      text-align center
      border-left 1px solid #172F6D
  .btn
    width 82%;
    margin-left 9%
    height 5.3rem
    line-height 5.3rem
    margin-top 3rem
    text-align center
    color #fff
    background-color #172F6D
    border-radius 100px
    font-size 1.7rem
    font-weight bold
    display block
  .i-tip
    font-size 1.3rem
    color #666
    margin-top 2rem
    text-align center
    display block
</style>
